<template>
    <select 
      v-if="isShow"
      @change="handleChange"
    >
      <option value="">{{ defaultTitle }}</option>
      <option 
        v-for="(info, name) in data"
        :value="`${ info[codeKey] }:${ name }`"
      >{{ name }}</option>
    </select> 
  </template>
  
  <script setup>
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({})
    },
    isShow: {
      type: Boolean,
      default: false
    },
    defaultTitle: {
      type: String,
      default: 'Default'
    },
    codeKey: String
  });
  
  const emit = defineEmits(['handleChange']);
  
  const handleChange = (e) => {
    emit('handleChange', e.target.value);
  }
  </script>